$(function () {
    $.ajax({
        url: "../json/carousel.json",
        type: "post",
        async: true,
        success: function (result) {
            var i = 0;
            var k = 0;
            var pic = [];
            var dot = [];
            var bgc = [];
            for (var j in result) {
                i++;
                dot.push($("<div class = 'dot' style='left:" + (240 + (40 * i)) + "px'><span>" + i + "</span></div>"));
                $("#banner_inner_mid").append(dot);
                pic.push($("<img src = " + result[j][0] + ">"));
                $("#banner_inner_mid").append(pic);
                bgc.push(result[j][1]);
            }
            pic[0].animate({"opacity":1},50).addClass("shrink").siblings("img").css("opacity", 0);
            dot[0].css("background",'red').siblings().css("background","grey");
            function time() {
                k++;
                if (k > 4) {
                    k = 0;
                }
                pic[k].addClass("shrink").animate({"opacity": 1},50).siblings("img").removeClass("shrink").css("opacity",0);
                $("#banner").css("background",bgc[k+1]);
                dot[k].css("background",'red').siblings().css("background","grey");
            }
            var timer = setInterval(function () {
                time();
            },4000);
            $("#banner_inner_mid").mouseenter(function(){
                clearInterval(timer);
            });
            $("#banner_inner_mid").mouseleave(function(){
                timer = setInterval(function () {
                    time();
                },4000);
            });

            for(var l = 0;l < dot.length;l++){
                dot[l].mouseenter(function(){
                    console.log(this.index);
                    $(this).css("background","red").siblings().css("background","grey");
                    pic[$(this).index()].animate({"opacity":1},50).addClass("shrink").siblings("img").css("opacity", 0).removeClass("shrink");
                    $("#banner").css("background",bgc[$(this).index()]);
                    k = $(this).index();
                })
            }
        }
    });
});

//var pic = [];
//
//for(var k = 0;k < result.length;k++){
//    pic.push()
//}
//
//function time (){
//
//    $(".Bimg").eq(i).animate({"opacity":1},500).siblings("img").animate({"opacity":0},500);
//
//    $("#banner").each(function(index,element){
//        $(element).css("background",pic[i]);
//    });
//
//    i++;
//    if(i >= 4){
//        i = 0;
//    }
//}
//var timer = setInterval(function(){
//
//    time();
//
//},500);
//
//$(".dot").mouseenter(function(){
//
//    $(this).css("color","black").css("background","white").siblings().css("color","white").css("background","grey");
//
//    $(".Bimfg").eq(this.index()).animate({"opacity":1},500).siblings("img").animate({"opacity":0},500);
//
//});
//
//$("#banner_inner_mid").mouseenter(function(){
//
//    clearInterval(timer);
//
//});
//$("#banner_inner_mid").mouseleave(function(){
//    clearInterval(timer);
//    timer = setInterval(function(){
//
//        time();
//
//    },500);

//        });
//    });
//}
//});



